<template>
	<view class="container">
		<view class="top_part">
			<view class="address_title">
				接单范围
			</view>

			<!-- <input class="uni-input" placeholder-style="color:#CCCCCC;font-size:32rpx" placeholder="请选择接单区域" /> -->
			<!-- <picker :value="index" :range="array" @change="city">
					<view>{{array[index]}} ↓</view>
			</picker> -->
			<region-picker class="picker" @change="region_change" :value="350104">
				<view class="picker">{{form.area}}</view>
			</region-picker>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view>
			<view class="setting_title">
				接单时间
			</view>
			<view class="time_part">
				<view class="time">
					<input v-model="form.beginTime" type="text" placeholder="8:00" value="8:00" />
				</view>
				<view class="time_line">

				</view>
				<view class="time">
					<input v-model="form.endTime" type="text" placeholder="18:00" value="18:00" />
				</view>
			</view>
			<view class="setting_title">
				价格区域
			</view>
			<view class="time_part">
				<view class="time">
					<input v-model="form.minPrice" type="text" placeholder="10/时" value="10/时" />
				</view>
				<view class="time_line">
			
				</view>
				<view class="time">
					<input v-model="form.maxPrice" type="text" placeholder="20/时" value="20/时" />
				</view>
			</view>
		</view>
		<HandleBtn btnName="确认设置" @click.native="sure()" class="bottom_btn"></HandleBtn>

	</view>
</template>

<script>
	import HandleBtn from "../../components/handleBtn.vue"
	export default {
		components:{
			HandleBtn
		},
		data() {
			return {
				array: ['北京', '上海', '广州', '四川', '香港'],
				index:0,
				value:[],
				form:{
					area:"请选择",
					beginTime:"",
					endTime:"",
					minPrice:"",
					maxPrice:"",
				}
			}
		},
		methods: {
			//出发城市选择
			region_change(e){
				// console.log(e)
				this.form.area = e.detail.value[1]
				// this.form.leaveCity = e.detail.value[0]+e.detail.value[1]+e.detail.value[2]
			},
			sure(){
				this.$utils.requert({url:'acceptSet',data:this.form,type:'post'}).then(res=>{
						if(res.code === 1 ){
							this.$utils.showLayer(res.message)
							uni.switchTab({
								url:'/pages/myCenter/myCenter'
							})
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
			},
			// 选择城市
			city(e) {
			    this.index = e.target.value
			    this.form.area = this.array[this.index]
			},
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.picker{
		flex: 1;
		text-align: right;
		margin-right: 10rpx;
	}
	.container {
		width: 100%;
		height: 100%;
		margin-bottom: 100rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
	}
	.top_part{
		display: flex;
		font-size: 32rpx;
		color: #868686;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 0;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f6f6f6;
	}
	.top_part picker{
		margin-left: auto;
		margin-right: 30rpx;
	}
	.top_part image{
		width: 14rpx;
		height: 26rpx;
	}
	.setting_title{
		font-size: 32rpx;
		color: #999999;
		margin-bottom: 30rpx;
		margin-top: 40rpx;
	}
	 .time_part{
		display: flex;
		align-items: center;
	}
    .time_part .time{
		font-size: 28rpx;
		color: #333333;
		width: 160rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f5f4f6;
		border-radius: 7rpx;
	}
	.time_part .time input{
		width: 72rpx;
		font-size: 28rpx;
		width: 160rpx;
		height: 88rpx;
		text-align: center;
	}
	 .time_part .time_line{
		width:40rpx;
		height: 6rpx;
		margin:0 10rpx;
		background-color: #f5f4f6;
	}
	.bottom_btn{
		margin-top: 120rpx;
	}
	
	
	
	
</style>
